<template>
  <div>
      <!-- 顶部 -->
      <find :title="title" @getInStorageList="getInStorageList"></find>
      <!-- 列表 -->
      <van-pull-refresh class="pull-refresh-style" v-model="refreshing" @refresh="onRefresh">
        <van-list
          :offset="offset"
          :finished="finished"
          finished-text="没有更多了"
          @load="getInStorageList"
        >
          <van-cell>
            <ul v-for="(item,index) in seeStoreArray" :key="index">
              <li>
                  <div class="totoalItemStyle" @click="starSeeStore(item.id)">
                      <div class="left">
                          <div class="leftLi" :class="index > 0 ? 'actmartop':''">
                            <span class="title">计划名称</span>
                            <span class="desc">{{item.planNames}}</span>
                          </div>
                          <div class="leftLi">
                            <span class="title">计划编号</span>
                            <span class="desc">{{item.planNo}}</span>
                          </div>
                          <div class="leftLi">
                            <span class="title">计划开始时间</span>
                            <span class="desc">{{$moment(item.startDate).format('YYYY-MM-DD ')}}</span>
                          </div>
                          <div class="leftLi">
                            <span class="title">计划结束时间</span>
                            <span class="desc">{{$moment(item.endDate).format('YYYY-MM-DD')}}</span>
                          </div>
                      </div>

                      <div class="right-arrow-style">
                          <span class="state" v-if="item.status === 4" style="color: red;">未开始</span>
                          <span class="state" v-if="item.status === 5" style="color: orange;">盘库中</span>
                          <img src="@/assets/ic_right_arrow.png" class="iconLeft" />
                      </div>
                  </div>

                  <div class="wulDetail"  @click="skipToInstorageDetail(item.id)">
                      盘库详情
                  </div>
              </li>
            </ul>
          </van-cell>
        </van-list>
      </van-pull-refresh>
  </div>
</template>

<script>
  import find from '@/components/find';
  import http from '@/utils/request.js';
  import api from '@/utils/api.js';
  export default{
    components:{
      find
    },
    data() {
      return {
        val:'',
        title: '盘库',
        // retryCount: 0,
        // page: 1, //请求第几页
        // pageSize: 10, //每页请求的数量
        // total: 0, //总共的数据条数
        offset: 0,
        finished: false,
        refreshing: false,
        seeStoreArray: [],
        conditionSearch: ''
      }
    },
    methods:{
      // 开始盘库
      starSeeStore(id){
        this.$router.push({
          path: "/articleList",
          query: {
            id: id
          }
        });
      },
      // 盘库详情
      skipToInstorageDetail(id) {
        this.$router.push({
          path: "/MateriaList",
          query: {
            id: id
          }
        });
      },
      getInStorageList(val){
          this.val = val;
          this.loading = true;
          var params = {
            keyWord:val
          }
          http.fetchGet(api.getCheckPlans, params,'加载中...').then(res => {
              if(res.code === 1){
                this.seeStoreArray = res.data;
                this.finished = true; //是否已加载完成，加载完成后不再触发load事件
                this.refreshing = false; //下拉刷新时，顶部是否处于加载中状态
              }
          }).catch(err => {
              console.log(err)
          });
      },
      onRefresh(){
          this.refreshing = true;
          this.getInStorageList(this.val)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .contLi {
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    font-size: 20px;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    margin-top: 10px;
  }
  .left {
    width: 75%;
    text-align: left;
  }
  .btn {
    height: 36px;
    line-height: 36px;
    min-width: 100px;
    border-radius: 50px;
  }
  .leftLi {
    display: flex;
    line-height: 40px;
    // word-break: keep-all;
    // white-space: nowrap;
  }
  .title {
    min-width: 38%;
    color: #999999;
  }
  .desc {
    margin-left: 20px;
    color: #333333;
  }
  .right-arrow-style {
    margin-left: 20px;
    display: flex;
    align-items: center;
  }
  .van-button--primary {
    background-color: rgba(71, 124, 236, 1);
  }
  .totoalItemStyle {
    padding-bottom: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    padding: 16px;
    box-sizing: border-box;
    flex-shrink: 1;
    font-size: 20px;
    align-items: flex-start;
    background-color: #fff;
    flex-grow: 1;
    width: 100%;
    justify-content: space-between;
    flex-flow: row nowrap;
    align-items: center;
  }
  .actmartop{
    margin-top: 20px;
  }
  .nav-bar-title-right-style {
    font-size: 20px;
    margin-top: 5px;
    font-family: PingFangSC-Regular;
    text-align: center;
    margin-bottom: 11px;
    color: rgba(71, 124, 236, 1);
  }
  .pull-refresh-style {
    height: 80%;
    width: 100%;
  }
  .iconLeft{
    width: 20px;
    height: 20px;
  }
  .state{
    font-size: 17px;
    color: #999999;

  }
  .wulDetail{
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    color: #666666;
    cursor: pointer;
    border-bottom: 10px solid #f2f2f2;
  }
  .van-cell{
    padding: 0;
  }
</style>
